import React, { Component } from 'react'
import { Card, Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'
import { Redirect} from 'react-router-dom'
import { login } from '../../actions/user'
import './index.css'

class Login extends Component {

    onFinish = values => {
        this.props.login(values)
        
      };
    
    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
      };
    render() {
        return (
           this.props.isLogin?  <Redirect to='/admin' />: 
            <Card size="small" title="登录" className='login-wraper'>
                <Form
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                             <Input disabled={this.props.isLoading} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                             <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                                disabled={this.props.isLoading}
                                 />
                        </Form.Item>

                    

                        <Form.Item>
                            <Button loading={this.props.isLoading} style={{width: '100%'}} type="primary" htmlType="submit">
                            登录
                            </Button>
                    </Form.Item>
                </Form>
          </Card>
        )
    }
}
const mapState = state=>({
    isLogin: state.user.isLogin,
    isLoading: state.user.isLoading
})

export default connect(mapState, {login})(Login)